<template>
    <div class="comment">
      <p class="comment_title">
        <span>评论</span>
        <span>（{{dataLength}}）</span>
      </p>
      <div class="comment_myinfo">
        <img :src="myuser.user_img" alt="" v-if="myuser.user_img">
        <img src="../../images/userimg.jpg" alt="" v-else>
        <input v-model="comcontent" type="text" placeholder="说点什么叭叭叭" @focus="focusInput">
        <button @click="commentOublish">发表</button>
      </div>
    </div>
</template>

<script>
    export default {
      props:['dataLength'],
        name: "article",
        data() {
            return {
              myuser:{},
              comcontent:'',
            }
        },
        methods: {
          async myUserinfo(){
            const res = await this.$http.get('/user/' + localStorage.getItem('id'))
            this.myuser = res.data[0]
            // console.log(res.data)
          },
          focusInput(){
            if (!this.myuser && !localStorage.getItem('token') && localStorage.getItem('id')){
              this.$msg.fail("请先登录")
            }
          },
          commentOublish(){
            if (!this.myuser || !localStorage.getItem('token') || !localStorage.getItem('id')){
              this.$msg.fail("请先登录")
              return
            }
            //发送评论
            this.$emit('Postcomment',this.comcontent)
          }
        },
      created() {
        if (localStorage.getItem('token')){
          this.myUserinfo()
        }
      }
    }
</script>

<style scoped lang="less">
  .comment{

    padding: 5vw 3vw 0 3vw;
    .comment_title{
      background-color: white;
      span:nth-child(2){
        color: #aaaaaa;
        margin-left: 1vw;
      }
    }
    .comment_myinfo{
      padding: 2.8vw 0;
      display: flex;
      img{
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
      }
      input{
        border-radius: 10vw;
        outline: none;
        border: 0;
        background-color: #f4f4f4;
        font-size: 3vw;
        padding: 0 30vw 0 4vw;
        margin-left: 4vw;
      }
      button{
        outline: none;
        border: 0;
        border-radius: 2vw;
        font-size: 3.3vw;
        background-color: #ff4f9f;
        color: white;
        margin-left: 5vw;
      }
    }
  }
</style>
